 <template>
  <div :style="{width:'100%',height:'100%'}" ref="homeEch"></div>
</template>

<script>
import user from '@/api/user';
export default {
  name: "Age",
  data() {
    return {
      data: [
      ],
      agelist: [{}]
    };
  },
  created() {
    // this.echarts();
  },
  mounted() {  
    this.echarts();
    this.resizefun = () => {
      this.$echarts.init(this.$refs.homeEch).resize();
    };
    window.addEventListener("resize", this.resizefun);
  },
  //移除事件监听，避免内存泄漏
  beforeDestroy() {
    window.removeEventListener("resize", this.resizefun);
    this.resizefun = null;
  },
  methods: {
    // 年龄比例接口
    echarts() {
      let myChart = this.$echarts.init(this.$refs.homeEch);
        let rent = 101
        let option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)",
                position: function (p) {   //其中p为当前鼠标的位置
                    return [p[0] + 10, p[1] - 10];
                }
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                top: '5%',
                left: '5%',
                itemWidth: 10,
                itemHeight: 10,
                data: ['自住', '出租', '商铺', '其他', '闲置'],
                textStyle: {
                    color: 'rgba(255,255,255,.5)',
                    fontSize: '12',
                }
            },
            //物业统计住户549户 671-549为其他未122
            //671+商铺15 686
            series: [
                {
                    name: '数量',
                    type: 'pie',
                    center: ['50%', '45%'],
                    radius: ['40%', '60%'],
                    color: ['#4ACC96', '#FFEB7B', '#0f78d6', '#F43103', '#1D9B52'],
                    label: { show: false },
                    labelLine: { show: false },
                    data: [
                        // { value: 685 - 46 - 110 - rent - 2, name: '自住' },
                        { value: 631 - rent - 41 - 46 - 110, name: '自住' },
                        { value: rent, name: '出租' },
                        { value: 46, name: '商铺' },
                        { value: 122, name: '其他' },
                        { value: 41, name: '闲置' },
                    ]
                }
            ]
        };
        myChart.setOption(option);
  
    }
  }
};
</script>

<style>
</style>
 